/*
 * @Author: Jiraiya
 * @Date: 2020-04-27 15:44:06
 * @LastEditors: Jiraiya
 * @LastEditTime: 2020-05-09 14:50:30
 * @Description: 
 */
import {useState} from 'react';
import { Form, InputNumber, Button, Row, Col } from 'antd';
import Echart from '../components/Echart';
import { computeRepeatRatio } from '../components/options/utils';
const numeral = require('numeral');

function IndexPage() {
    const [form] = Form.useForm();
    const [ratio, setRatio] = useState(0);
    const [cash, setCash] = useState(0);
    const [year, setYear] = useState(0);

    const [item, setItem] = useState(
        {
            total: 0,
            originCash: 0,
            totalStep: [],
            originStep: [],
            ratioStep: [],
            yearList: [],
        }
    );
    const onFinish = () => {
        setItem(computeRepeatRatio(cash, ratio, year));
    };
    return <React.Fragment>
            <div className='total-stat'>
                <Row justify='space-between' gutter={24}>
                    <Col span={8}>投资本金: {numeral(item.originCash).format('0,000.00')}元</Col>
                    <Col span={8}>总计利息: {numeral(item.total - item.originCash).format('0,000.00')}元</Col>
                    <Col span={8}>本息和: {numeral(item.total).format('0,000.00')}元</Col>
                </Row>
                <style jsx>{`
                    .total-stat{
                        margin-bottom: 30px;
                        padding: 15px;
                        border: 1px dashed red;
                        font-weight: bold;
                    }
                `}</style>
            </div>
            <Row justify='space-between'>
                <Echart item={{title: '投资金额和本息和对比', yearList: item.yearList, data: [item.totalStep, item.originStep]}} type='ratio' containerStyle ={{width: '45%'}}/>
                <Echart item={{title: '回报总利率', yearList: item.yearList, data: [item.ratioStep]}} type='ratio' containerStyle ={{width: '45%'}}/>
            </Row>
            <Form
                    layout='horizontal'
                    form={form}
                    initialValues={{ layout: 'horizontal' }}
                    onFinish={onFinish}
                >
                <Row gutter={24} justify='space-around'>
                    <Form.Item label="预期年利率（%）" >
                        <InputNumber placeholder="预期年利率" 
                        min={0} max={100} value={ratio} 
                        defaultValue={0}
                        onChange={(val)=>{setRatio(val)}}
                        />
                    </Form.Item>
                    <Form.Item label="年定投金额（元）">
                        <InputNumber placeholder="年定投金额" 
                        min={0} value={cash} 
                        defaultValue={0}
                        onChange={(val)=>{setCash(val)}}
                        />
                    </Form.Item>
                    <Form.Item label="定投年限">
                        <InputNumber placeholder="定投年限" 
                        min={0} max={100} value={year} 
                        onChange={(val)=>{setYear(val)}}/>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">计算结果</Button>
                    </Form.Item>
                </Row>
            </Form>
        </React.Fragment>
}
  
export default IndexPage;